<template>
  <div class="echarts">
    <div :id="id" class="echarts"></div>
  </div>
</template>
<script>
  import * as echarts from 'echarts';
  import 'echarts-liquidfill';
  /*水球图
    * 单一组件
    * 作者：trs
    *
    * */
    export default {
        name: "Liquidfill",
        props:{
          id:{
            type: String,
            default: "MyListBar"
          },
          data:Number,
          option:Object
        },
        methods:{
          init(){
            let  myechart=echarts.init(document.getElementById(this.id));
            let value=this.data
            var datas = [value,value,value];

            let option={
              title: {
                text: (value * 100).toFixed(0) + '{a|%}',
                textStyle: {
                  fontSize: 24,
                  fontFamily: 'Microsoft Yahei',
                  fontWeight: 'normal',
                  color: '#bcb8fb',
                  rich: {
                    a: {
                      fontSize: 16,
                    }
                  }
                },
                x: 'center',
                y: '40%'
              },
              graphic: [{
                type: 'group',
                left: 'center',
                top: '60%',
                children: [{
                  type: 'text',
                  z: 100,
                  left: '10',
                  top: 'middle',
                  style: {
                  }
                }]
              }],
              series: [{
                type: 'liquidFill',
                radius: '90%',
                center: ['50%', '50%'],
                 // shape: 'roundRect',
                data: datas,
                backgroundStyle: {
                  color: {
                    type: 'linear',
                    x: 1,
                    y: 0,
                    x2: 0.5,
                    y2: 1,
                    colorStops: [{
                      offset: 1,
                      color: 'rgba(68, 145, 253, 0)'
                    }, {
                      offset: 0.5,
                      color: 'rgba(68, 145, 253, 0)'
                    }, {
                      offset: 0,
                      color: 'rgba(68, 145, 253, .3)'
                    }],
                    globalCoord: false
                  },
                },
                outline: {
                  borderDistance: 0,
                  itemStyle: {
                    borderWidth: 1,
                    borderColor: {
                      type: 'linear',
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [{
                        offset: 0,
                        color: 'rgba(69, 73, 240, 1)'
                      }, {
                        offset: 0.5,
                        color: 'rgba(69, 73, 240, 1)'
                      }, {
                        offset: 1,
                        color: 'rgba(69, 73, 240, 1)'
                      }],
                      globalCoord: false
                    },
                    shadowBlur: 10,
                    shadowColor: '#000',
                  }
                },
                label: {
                  normal: {
                    formatter: '',
                  }
                }
              }, ]
            };
            myechart.setOption(option)
          }
        },
        mounted() {
          this.init();
       }

    }
</script>

<style scoped>
.echarts{
  width: 100%;
  height: 100%;
}
</style>
